<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <link type="text/css" rel="stylesheet" href="recursos/bootstrap/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="recursos/estilos/acd.main.css" />
        <link type="text/css" rel="stylesheet" href="recursos/font-awesome/css/font-awesome.min.css">

        <link rel="stylesheet" href="recursos/nivo-slider/themes/default/default.css" type="text/css" media="screen" />                
        <link rel="stylesheet" href="recursos/nivo-slider/nivo-slider.css" type="text/css" media="screen" />


        <style>
            #fav-slide {
                background: url('recursos/imagenes/bg-pattern.png') repeat-x bottom center;
                padding-top: 7px;
                padding-bottom: 7px;
            }
            .tdIcon{
                vertical-align: top; color:#333; width:70px; text-align:left;
            }
            .iconBox{
                display: inline-block; padding:5px; 
                border:solid 3px #333; border-radius:5px; 
                width:35px; text-align:center; 
                -webkit-box-shadow: -12px 10px 35px -10px #556;
                -moz-box-shadow: -12px 10px 35px -10px #556;
                box-shadow: -12px 10px 35px -10px #556;
            }
            .tdBoxInfo{
                padding-right:20px; vertical-align:top;
            }
            .tdBoxInfo.final{
                padding-right:0px;
            }
        </style>
    </head>
    <body>


        <div class="header">
            Juez virtual para concursos de programación 2
        </div>



        <div class="slider-wrapper theme-default" style="position:relative; border:solid 0px red; margin-top:30px; width:1000px; margin:auto;">
            
            
            <span class="btn btn-inverse" id="btnTriggerLogin"
                  style="position:absolute; top:10px; right:50px; z-index:1000;">
                <i class="icon-signin"></i> Ingresar al sistema
            </span>
            
            
            <div id="divLogin" style="z-index:1000; top:50px; right:50px; display:none;"> 

                <div style="letter-spacing: 1px;">Ingreso al sistema
                </div>


                <div id="formLogin" style="font-size:12px; font-weight: normal; letter-spacing: normal;">
                    <br>Correo electrónico:<br>
                    <input type="text">
                    <br>Password:
                    <input type="password">
                    <br>

                    <span id="msgOut"></span><br>
                    <button class="blanco">Ingresar
                    </button>                        
                </div>
       
                <span class="toLink">
                    Crear una cuenta
                </span>
        
            </div>
            
            
            <div id="slider" class="nivoSlider">
                <a href="#"><img src="recursos/nivo-slider/demo/images/toystory.jpg" data-thumb="recursos/nivo-slider/demo/images/toystory.jpg" alt="" /></a>
                <a href="#"><img src="recursos/nivo-slider/demo/images/up.jpg" data-thumb="recursos/nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <a href="#"><img src="recursos/nivo-slider/demo/images/walle.jpg" data-thumb="recursos/nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" /></a>
                <a href="#"><img src="recursos/nivo-slider/demo/images/nemo.jpg" data-thumb="recursos/nivo-slider/demo/images/nemo.jpg" alt="" title="#htmlcaption" /></a>
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>


        <table style="margin:auto; width:1000px;">
            <tr>
                <td class="tdIcon" style="">
                    <span class="iconBox" style="">
                        <i class="icon-globe icon-2x"></i>
                    </span> 
                </td>
                <td class="tdBoxInfo" style="">
                    <b>Enlaces</b>
                    <div id="fav-slide" class="clearfix"></div>
                    <a href="#"><i class="icon-globe"></i> Instituto Tecnológico Superior de Zapopan</a><br/>                   
                    <a href="#"><i class="icon-globe"></i> Olimpiada de Informatica del Estado de Jalisco</a><br/>                   
                    <a href="#"><i class="icon-globe"></i> ACMIPC</a><br/>                   
                </td>                
                
                
                <td class="tdIcon" style="">
                    <span class="iconBox" style="">
                        <i class="icon-lightbulb icon-2x"></i>
                    </span> 
                </td>
                <td class="tdBoxInfo" style="width:200px;">
                    <b>Información</b>
                    <div id="fav-slide" class="clearfix"></div>
                    <a href="#"><i class="icon-question-sign"></i> Preguntas frecuentes</a><br/>
                    <a href="#"><i class="icon-info-sign"></i> Acerca de...</a><br/>                   
                </td>                                
                <td></td>
                <td class="tdIcon" style="">
                    <span class="iconBox" style="">
                        <i class="icon-coffee icon-2x"></i></span> 
                </td>
                <td class="tdBoxInfo final" style="width:200px;">
                    <b>Comunicación</b>
                    <div id="fav-slide" class="clearfix"></div>
                    <a href="#"><i class="icon-bug"></i> Reportar un error</a><br/>                   
                    <a href="#"><i class="icon-comment"></i> Escribe tus comentarios</a><br/>
                    <a href="#"><i class="icon-facebook-sign"></i> Siguenos en Facebook</a><br/>
                </td>                               
            </tr>

        </table>




        <div class="footer">
            <div style="width:977px; margin: auto;">
                <hr style="height:3px; background-color:#444; border: solid 0px #444; margin:0px;" />
                <span style="color:#444; font-size:12px;">                    
                    Juez virtual para concursos de programación &copy; ${year}
                    by Alejandro Cazares</span>
            </div>
        </div>


        <script src="recursos/jquery/jquery-1.10.1.min.js" ></script>
        <script type="text/javascript" src="recursos/nivo-slider/jquery.nivo.slider.js"></script>
        <script type="text/javascript">
            $(function(){
                if(($("#slider").css('display')+'').toLowerCase()=='block'){
                    $('#slider').nivoSlider();
                }
                $("#btnTriggerLogin").bind('click', function(){
                    $('#divLogin').toggle('slow');
                    $('#btnTriggerLogin').toggle('slow');
                });
            });
        </script>                    

    </body>
</html>
